<!-- 商品分类表格 -->
<template>
  <div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 90%"
      :default-sort="{ prop: 'rank', order: 'descending' }"
      @sort-change="sortChange"
    >
      <el-table-column min-width="30px" label="商品名称">
        <template slot-scope="{ row }">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="30px" label="类型">
        <template slot-scope="{ row }">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="商品图片" width="95">
        <template slot-scope="scope">
          <img
            :src="scope.row.image_uri"
            alt
            style="width: 50px; height: 50px;"
          />
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="排序"
        width="90"
        sortable
        prop="rank"
      />
      <el-table-column class-name="status-col" label="状态" width="110">
        <template slot-scope="{ row }">
          <el-switch
            v-model="row.status"
            active-color="#1890ff"
            inactive-color="#ff4949"
          />
        </template>
      </el-table-column>
    
      <el-table-column label="操作" width="220">
         <template slot-scope="scope">
              <el-button type="text" @click="dialogFormVisibleone = true">添加子目录</el-button>
               <el-dialog title="添加子目录" :visible.sync="dialogFormVisibleone">
                <el-form :model="form">
                  <el-form-item label="分类名称" :label-width="formLabelWidth" style="margin-left:-60px">
                    <el-input v-model="form.name" autocomplete="off" placeholder="数码产品"  style="width:400px"></el-input>
                  </el-form-item>
                  
                   <el-form-item label="子级">
                    <el-select v-model="form.region" placeholder="每日新品">
                      <el-option label="区域一">广东</el-option>
                      <el-option label="区域二">湛江</el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="分类图标">
                      <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                  </el-form-item>
                  <el-form-item label="排序">
                    <el-input-number
                      v-model="num"
                      @change="handleChange"
                      :min="1"
                      :max="10"
                      label="描述文字"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-switch
                      v-model="value"
                      active-color="#148eff"
                      inactive-color="#ff4949"
                    >
                    </el-switch>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisibleone = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisibleone = false">确 定</el-button>
                </div>
              </el-dialog>

             <el-button type="text" @click="Addbulletbox = true">编辑</el-button>
              <!-- 编辑弹框 -->
              <el-dialog title="编辑" :visible.sync="Addbulletbox">
                <el-form :model="form">
                  <el-form-item label="分类名称" :label-width="formLabelWidth" style="margin-left:-60px">
                    <el-input v-model="form.name" autocomplete="off" placeholder="数码产品"  style="width:400px"></el-input>
                  </el-form-item>
                  
                   <el-form-item label="父级">
                    <el-select v-model="form.region" placeholder="每日新品">
                      <el-option label="区域一">广东</el-option>
                      <el-option label="区域二">湛江</el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="分类图标">
                      <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                      </el-dialog>
                  </el-form-item>
                  <el-form-item label="排序">
                    <el-input-number
                      v-model="num"
                      @change="handleChange"
                      :min="1"
                      :max="10"
                      label="描述文字"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-switch
                      v-model="value"
                      active-color="#148eff"
                      inactive-color="#ff4949"
                    >
                    </el-switch>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="Addbulletbox = false">取 消</el-button>
                  <el-button type="primary" @click="Addbulletbox = false">确 定</el-button>
                </div>
              </el-dialog>

              <el-button  @click.native.prevent="deleteRow(scope.$index, list)"
               type="text" size="small">删除</el-button>
            </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; display: flex;  justify-content: space-between;">
      <span />
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <RecycleDirlog
      :flag="recyleIsShow"
      :list="deleteList"
      @handleCancel="handleRecycleCancel"
      @handleAddList="handleAddList"
      @handleRecycle="handleRecycle"
    />
  </div>
</template>

<script>
import { fetchList } from "@/api/productData";
import Addbulletbox from "./Addbulletbox";
export default {
  components: {
    Addbulletbox,
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  props: {
    type: {
      type: String,
      default: "CN"
    }
  },
  data() {
    return {
      handlePictureCardPreview:'',
      value: "",
      num: 1,
      dialogImageUrl: "",
      handleChange:'',
      recyleIsShow:'',
      handleRemove:'',
      deleteList:'',
      handlePictureCardPreview:'',
      Addbulletbox: false,
      dialogFormVisibleone: false,
      dialogVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      list: [], 
      listQuery: {
        page: 1,
        limit: 5,
        type: this.type,
        sort: "+id",
        total: 0
      },
      loading: false,
      newData: [] //模糊筛选容器
    };
  },
  created() {
    this.getList();
  },
  methods: {
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      //  handlePictureCardPreview(file) {
      //   this.dialogImageUrl = file.url;
      //   this.dialogVisible = true;
      // },
      Addbulletbox() {
        this.show = true;
      },
     deleteRow(index, rows) {//删除
        rows.splice(index, 1);
      },
    // 初始获取数据
    getList() {
      this.loading = true;
      this.$emit("create"); 
      fetchList(this.listQuery).then(res => {
        if (res.code === 20000) {
          this.newData = res.data.items;
          this.data = res.data.items.filter(item => item.type === "CN");
          this.datas = res.data.items.filter(item => item.type === "US");
          this.newDatas = res.data.items.filter(item => item.type === "JP");
          if (this.type === "CN") {
            this.list = this.data;
          } else if (this.type === "US") {
            this.list = this.datas;
          } else if (this.type === "JP") {
            this.list = this.newDatas;
          }
          this.listQuery.total = res.data.total;
        }
      });
    },
    // 排序
    sortChange(column, prop, order) {
      const data = this.list.sort((a, b) => {
        if (column.order === "ascending") {
          return a.rank - b.rank;
        } else {
          return b.rank - a.rank;
        }
      });
      this.list = data;
    },
    // 显示页数
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    // 分页切换
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    // 模糊搜索
    handleOnSearch(val) {
      if (val !== "") {
        const data = this.newData.filter(
          item =>
            item.title.includes(val) ||
            item.display_time.includes(val) ||
            item.id.includes(val) ||
            item.price.toString().includes(val) ||
            item.volume.toString().includes(val) ||
            item.repertory.toString().includes(val) ||
            item.rank.toString().includes(val)
        );
        this.list = data;
        this.listQuery.total = data.length;
      }
    },
    handleRecycle(val) {
      this.isShow = true;
      this.distinguishType = "recycle";
      this.tableItem = val;
      this.$refs.dirlog.handleSetForm(val);
      this.recyleIsShow = false;
    },
    handleRecycleCancel() {
      this.recyleIsShow = false;
    },
    // 恢复商品
    handleAddList(val) {
      const data = this.deleteList.filter(item => item.id !== val.id);
      this.deleteList = data;
      this.list.unshift(val);
    },
  }
};
</script>